<template>
  <div class="editHouseDefault">
    <el-form ref="dataForm" :model="temp" label-width="100px" class="fromData">
      <el-form-item v-if="eee" label="公告序号:">
        <span>{{ temp.notice_id }}</span>
      </el-form-item>
      <el-form-item label="公告类型:">
        <el-input v-model="temp.notice_type" style="width:300px;" />
      </el-form-item>
      <el-form-item label="公告主题:">
        <el-input v-model="temp.notice_theme" style="width:300px;" />
      </el-form-item>
      <el-form-item label="公告内容:">
        <quill-editor
          ref="myTextEditor"
          v-model="temp.notice_content"
          :options="editorOption"
          style="height:500px;width:700px"
        />
      </el-form-item>
      <el-form-item style="margin-top:200px">
        <el-button v-if="aaa" type="primary" @click="creat">立即创建</el-button>
        <el-button v-if="bbb" type="primary" @click="update">立即更新</el-button>
        <el-button @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
    <el-button
      style="float:right;  position: absolute;
  top:40px;
  right:50px;"
      @click="goBack"
    >返回用户列表</el-button>
    <el-button
      v-if="zzz"
      type="primary"
      style="float:right;  position: absolute;
  top:100px;
  right:50px;"
      @click="cls"
    >新建一个</el-button>
    <!-- 确认执行 -->
    <el-dialog :visible.sync="submit" width="30%">
      <el-form
        ref="doForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <span>确定执行此操作吗？</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submit = false">取消</el-button>
        <el-button v-if="ccc" type="primary" @click="creatData">确定新增</el-button>
        <el-button v-if="ddd" type="primary" @click="updateData">确定更新</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getToken, getAccount } from '@/utils/auth'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      aaa: false, // 立即创建按钮
      bbb: true, // 立即更新按钮
      ccc: true, // 确定新增按钮
      ddd: false, // 确定更新按钮
      eee: false, // ID显示
      zzz: false, // 新增一个按钮,
      submit: false,
      rules: {},
      temp: {
        community_id: 5,
        notice_id: 0,
        notice_type: '',
        notice_time: new Date(),
        notice_theme: '',
        notice_state: 0,
        notice_content: ''
      },
      content: '',
      editorOption: {
        placeholder: '请输入公告内容'
      }
    }
  },
  mounted() {
    var data = this.$route.params.data
    if (data !== undefined) {
      if (data.notice_id === '') {
        this.aaa = true
        this.eee = false
        this.bbb = false
        this.zzz = false
      } else {
        this.temp = data
        this.eee = true
        this.aaa = false
        this.bbb = true
        this.zzz = true
        this.content = data.notice_content
      }
    } else {
      this.aaa = true
      this.eee = false
      this.bbb = false
      this.zzz = false
    }
  },
  methods: {
    onEditorChange({ editor, html, text }) {
      this.content = html
    },
    // 清除数据，添加一个
    cls() {
      this.$router.go(0) // 刷新页面
    },
    // 新增
    creat() {
      this.submit = true
      this.ccc = true
      this.ddd = false
    },
    // 修改
    update() {
      this.submit = true
      this.ccc = false
      this.ddd = true
    },
    // 返回
    goBack() {
      this.$router.push({ path: '/suggest/announcement' })
    },
    // 确认新增
    creatData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          return request({
            url: '/v3/notice/insert',
            method: 'post',
            headers: {
              account_type: getAccount()
            },
            data: this.temp
          }).then(res => {
            if (res.tip === '添加成功.') {
              this.submit = false
              this.$router.push({ path: '/suggest/announcement' })
              return res
            }
          })
        }
      })
    },
    // 确认修改
    updateData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          return request({
            url: '/v3/notice/update',
            method: 'post',
            headers: {
              account_type: getAccount()
            },
            data: this.temp
          }).then(res => {
            if (res.tip === '编辑成功.') {
              this.submit = false
              this.$router.push({ path: '/suggest/announcement' })
              return res
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" >
.editHouseDefault {
  margin-top: 50px;
  padding: 20px;
  overflow: hidden;
  position: relative;
  img {
    width: 200px;
    height: 200px;
  }
  .editor-btn {
    margin-top: 20px;
  }
  .fromData {
    padding: 20px;
  }
}
</style>
